<template>
  <div id="user_app">
    <div class="control">
      <el-button type="primary" plain round @click="isShow.flag=true">新增</el-button>
    </div>
    <el-table :data="userList" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"> </el-table-column>
      <el-table-column prop="username" label="账号名称" width="180"> </el-table-column>
      <el-table-column prop="rolename" label="角色名称" width="180"> </el-table-column>
      <el-table-column prop="status" label="账号状态"> </el-table-column>
      <el-table-column prop="address" label="操作">
          <template v-slot="$props">
            <el-button type="warning" size="mini" plain round @click="edit_user($props.row)">编辑</el-button>
            <el-button type="danger" size="mini" plain round @click="del_user($props.row.id)">删除</el-button>
          </template>
          
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="count"
        class="user_pagination"
        :page-size="pagintor.size"
        @current-change="take_page"
        >
    </el-pagination>
    <Dialog :isShow="isShow" @reload="reload" ref="dialog_ref"/>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import Dialog from "../components/AddUser.vue"

export default {
    data(){
        return {
            pagintor: {page: 1,size: 2},
            isShow: {flag: false}
        }
    },
    computed:{
        ...mapState('user_model',['userList','count'])
    },
    methods:{
        del_user(id){
            this.$axios.post("/userdelete",{id}).then(
                res=>{
                    if(res.code === 200){
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        })
                        this.reload()
                    }
                }
            )
        },
        edit_user(obj){
            //打开模态框
            this.isShow.flag = true
            //设置数据
            this.$refs.dialog_ref.setData(obj)
        },
        reload(){
            this.userCountActions()
            this.userListActions(this.pagintor)
        },
        take_page(page){
            this.pagintor.page = page
            this.userListActions(this.pagintor)
        },
        ...mapActions('user_model',['userCountActions','userListActions'])
    },
    created(){
        this.userCountActions()
        this.userListActions(this.pagintor)
    },
    components:{
        Dialog
    }
};
</script>
<style>
</style>